<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
    </head>
    <body>
        <div>
            <button id="refresh">
                Clear Cache
            </button>
            <button id="region">
                Set India
            </button>
        </div>
        <div id="palette">
        </div>
        <div id="map">
        </div>
        <script src="visualizations.js">
        </script>
        <script type="text/javascript">
                        //to load the google APIs. To be done by the user in his own logic. Below function uses
                        //load API from visualizations.js
                        loadAPI("geomap", "callback");
                        var map;
                        function callback(){ //program control reached here after google APIs are loaded
                            //Creating a new GeoMap object.
                            map = new GeoMap({
                                //map will be drawn in div with id "map"
                                mapContainer: "map",
                                //palette will be drawn in div with id "palette"			
                                paletteContainer: "palette",
                                //character that separates individual entries in the data strings. Default - "~"
                                delimiter: ",",
                                //whether to draw the palette or not					
                                drawPalette: true,
                                //color representing the intensity [min intensity, max intensity]. Default - red
                                color: ["0xF4CCCC", "0x990000"],
                                //whether to zoom into countries to display the provinces or not
                                zoomToCountries: true,
                                //handlers to be called for zoom in event and zoom out event
                                zoomHandler: zoomHandler,
                                //ISO-3166 code representing the country to be zoomed in during first map load
                                //Default - world. IN stands for India
                                defaultRegion: "IN",
                                //width of the map. Default - 556px
                                width: "800px",
                                //height of the map. Default - 347px
                                height: "500px"
                            });
                            //setting the data for the map view and drawing the map. States of India are given 
                            //because the initial view zooms to India as per the defaultRegion given while 
                            //drawing the map. Along with setting the data it gets cached
                            map.draw({
                                location: "Kerala, Tamil Nadu",
                                count: "500, 300"
                            });
                            document.getElementById("refresh").onclick = function(){
            					map.clearCache();
            				};
            				document.getElementById("region").onclick = function(){
            					map.setRegion("IN");
            				};
                        }
                        
                        /*
                         * This function has been set as the zoom handler. When the user is zoomed in or zooms out of a country
                         * When control reaches this function, we check whether its world view or country view and set the data
                         * accordingly. Then we use isCached function to check whether data for that view is already cached
                         * if yes, we just need to call draw() without any data because data is already cached and available.
                         * Else the data has to be passed along with the call to draw().
                         */
            			function zoomHandler(region){
							var data = (region == "world") ? {
                                location: "India, China",
                                count: "500, 300"
                            }:{
                                location: "Kerala, Karnataka",
                                count: "500, 300"
                            };
							(!map.isCached(region)) ? map.draw(data) : map.draw();
                        }				
        </script>
    </body>
</html>
